<template>
	<div>
		<el-dialog :title="title" :close-on-click-modal="false" v-dialogDrag :visible.sync="visible">
			<el-form :model="inputForm" size="small" ref="inputForm" v-loading="loading"
				:class="method==='view'?'readonly':''" :disabled="method==='view'" label-width="120px">
				<el-row :gutter="15">
					<!-- <el-col :span="12">
						<el-form-item label="合同编号" prop="contractNumber" :rules="[
                 ]">
							<el-input v-model="inputForm.contractNumber" placeholder="请填写合同编号"></el-input>
						</el-form-item>
					</el-col> -->
					<el-col :span="12" v-if="method==='view'">
						<el-form-item label="签约时间" prop="signingTime" :rules="[ {required: true, message:'签约时间不能为空', trigger:'blur'}]">
							<el-date-picker style="width: 100%;" v-model="inputForm.signingTime" type="datetime"
								value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间">
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="12"  v-if="method==='view'">
						<el-form-item label="用户" prop="user.id" :rules="[]">
							<GridSelect title="选择用户" labelName='realName' labelValue='id' :value="inputForm.user.id"
								:limit="1" @getValue='(value) => {inputForm.user.id=value}' :columns="[
								{
								prop: 'id',
								label: '主键'
								},
								{
								prop: 'realName',
								label: '用户名'
								}
								]" :searchs="[
								{
								prop: 'id',
								label: '主键'
								},
								{
								prop: 'realName',
								label: '用户名'
								}
								]" 
								dataListUrl="/dlyrl/hr/userinformation/userInformation/list" entityBeanName="userInformation"
								queryEntityUrl="/dlyrl/hr/userinformation/userInformation/queryById">
							</GridSelect>
						</el-form-item>
					</el-col>
					<el-col :span="12"  v-if="method==='view'">
						<el-form-item label="所属公司" prop="enterprise.id" :rules="[ ]">
							<GridSelect title="选择公司" labelName='companyName' labelValue='id'
								:value="inputForm.enterprise.id" :limit="1"
								@getValue='(value) => {inputForm.enterprise.id=value}' :columns="[
								{
								prop: 'id',
								label: '主键'
								},
								{
								prop: 'companyName',
								label: '企业名称'
								}
								]" :searchs="[
								{
								prop: 'id',
								label: '主键'
								},
								{
								prop: 'companyName',
								label: '企业名称'
								}
								]" 
								dataListUrl="/dlyrl/hr/enterpriseinformation/enterpriseInformation/list"
								entityBeanName="enterpriseInformation"
								queryEntityUrl="/dlyrl/hr/enterpriseinformation/enterpriseInformation/queryById">
							</GridSelect>
						</el-form-item>
					</el-col>
					<el-col :span="12"  v-if="method==='view'">
						<el-form-item label="所属分部" prop="branchdepart.id" :rules="[ ]">
							<SelectTree ref="branchdepart" :props="{
							value: 'id',             // ID字段名
							label: 'name',         // 显示名称
							children: 'children'    // 子级字段名
							}" 
							url="/dlyrl/hr/orporateinstitutions/orporateInstitutions/treeData"
							:value="inputForm.branchdepart.id" :clearable="true" :accordion="true"
							@getValue="(value) => {inputForm.branchdepart.id=value}" />
						</el-form-item>
					</el-col>
					<el-col :span="12"  v-if="method==='view'">
						<el-form-item label="所属部门" prop="department.id" :rules="[  ]">
							<SelectTree ref="department" :props="{
							value: 'id',             // ID字段名
							label: 'name',         // 显示名称
							children: 'children'    // 子级字段名
							}" 
							url="/dlyrl/hr/orporateinstitutions/orporateInstitutions/treeData"
							:value="inputForm.department.id" :clearable="true" :accordion="true"
							@getValue="(value) => {inputForm.department.id=value}" />
						</el-form-item>
					</el-col>
					<el-col :span="12"  v-if="method==='view'">
						<el-form-item label="用户岗位名称" prop="postName" :rules="[ ]">
							<el-input v-model="inputForm.postName" placeholder="请填写用户岗位名称"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12"  v-if="method==='view'">
						<el-form-item label="用户名称" prop="name" :rules="[  ]">
							<el-input v-model="inputForm.name" placeholder="请填写用户名称"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12"  v-if="method==='view'">
						<el-form-item label="用户身份证号" prop="idCard" :rules="[ ]">
							<el-input v-model="inputForm.idCard" placeholder="请填写用户身份证号"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12"  v-if="method==='view'">
						<el-form-item label="用户手机号" prop="phone" :rules="[ ]">
							<el-input v-model="inputForm.phone" placeholder="请填写用户手机号"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12"  v-if="method==='view'">
						<el-form-item label="在职状态" prop="jobStatus" :rules="[ ]">
							<el-select v-model="inputForm.jobStatus" placeholder="请选择" style="width: 100%;">
								<el-option v-for="item in $dictUtils.getDictList('employment_status')" :key="item.value"
									:label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="用户是否确认" prop="userIsSure" :rules="[ ]">
							<el-select v-model="inputForm.userIsSure" placeholder="请选择" style="width: 100%;">
								<el-option v-for="item in $dictUtils.getDictList('usersure')" :key="item.value"
									:label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="用户薪资" prop="userSalary" :rules="[ ]">
							<el-input v-model="inputForm.userSalary" placeholder="请填写用户薪资"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="开始时间" prop="beginTime" :rules="[ ]">
							<el-date-picker style="width: 100%;" v-model="inputForm.beginTime" type="date"
								value-format="yyyy-MM-dd" placeholder="选择日期时间">
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="到期时间" prop="endTime" :rules="[ ]">
							<el-date-picker style="width: 100%;" v-model="inputForm.endTime" type="date"
								value-format="yyyy-MM-dd" placeholder="选择日期时间">
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="试用期时间" prop="probationPeriod" :rules="[ ]">
							<el-input v-model="inputForm.probationPeriod" placeholder="请填写试用期时间"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="试用期薪资" prop="probationSalary" :rules="[ ]">
							<el-input v-model="inputForm.probationSalary" placeholder="请填写试用期薪资"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12"  v-if="method==='view'">
						<!-- :on-preview="(file, fileList) => {$window.location.href = (file.response && file.response.url) || file.url}" -->
						<el-form-item label="签名照片" prop="photo" :rules="[ ]">
							<el-upload ref="photo" v-if="visible"
								:action="`${this.$http.BASE_URL}/sys/file/webupload/upload?uploadPath=/dlyrl/hr/dispatchcontract/dispatchContract`"
								:headers="{token: $cookie.get('token')}"								
								:on-preview="(file) => {$window.open ((file.response && file.response.url) || file.url,'_blank') }"
								:on-success="(response, file, fileList) => {
								inputForm.photo = fileList.map(item => (item.response && item.response.url) || item.url).join('|')
								}" :on-remove="(file, fileList) => {
								$http.post(`/sys/file/webupload/deleteByUrl?url=${(file.response && file.response.url) || file.url}`).then(({data}) => {
									$message.success(data.msg)
								})
								inputForm.photo = fileList.map(item => item.url).join('|')
								}" :before-remove="(file, fileList) => {
								return $confirm(`确定移除 ${file.name}？`)
								}" multiple :limit="5" :on-exceed="(files, fileList) =>{
								$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
								}" :file-list="photoArra">
								<el-button size="small" type="primary">点击上传</el-button>
								<div slot="tip" class="el-upload__tip">添加相关附件</div>
							</el-upload>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="合同模板" prop="formwork" :rules="[ ]">
							<!-- :on-preview="(file, fileList) => {$window.location.href = (file.response && file.response.url) || file.url}" -->
							<el-upload ref="formwork" v-if="visible"
								:action="`${this.$http.BASE_URL}/sys/file/webupload/upload?uploadPath=/dlyrl/hr/dispatchcontract/dispatchContract`"
								:headers="{token: $cookie.get('token')}"
								:on-preview="(file) => {$window.open ((file.response && file.response.url) || file.url,'_blank') }"								
								:on-success="(response, file, fileList) => {
								inputForm.formwork = fileList.map(item => (item.response && item.response.url) || item.url).join('|')
								}" :on-remove="(file, fileList) => {
								$http.post(`/sys/file/webupload/deleteByUrl?url=${(file.response && file.response.url) || file.url}`).then(({data}) => {
									$message.success(data.msg)
								})
								inputForm.formwork = fileList.map(item => item.url).join('|')
								}" :before-remove="(file, fileList) => {
								return $confirm(`确定移除 ${file.name}？`)
								}" multiple :limit="5" :on-exceed="(files, fileList) =>{
								$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
								}" :file-list="formworkArra">
								<el-button size="small" type="primary">点击上传</el-button>
								<div slot="tip" class="el-upload__tip">添加相关附件</div>
							</el-upload>
						</el-form-item>
					</el-col>				
				<!-- 	<el-col :span="12">
											<el-form-item label="合同有效期" prop="earlyWarning" :rules="[
					]">
												<el-select v-model="inputForm.earlyWarning" placeholder="请选择" style="width: 100%;">
													<el-option v-for="item in $dictUtils.getDictList('warning')" :key="item.value"
														:label="item.label" :value="item.value">
													</el-option>
												</el-select>
											</el-form-item>
										</el-col> -->
					<el-col :span="12">
						<el-form-item label="备注信息" prop="remarks" :rules="[ ]">
							<el-input type="textarea" v-model="inputForm.remarks" placeholder="请填写备注信息"></el-input>
						</el-form-item>
					</el-col>			
				</el-row>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button size="small" @click="visible = false">关闭</el-button>
				<el-button size="small" type="primary" v-if="method != 'view'" @click="doSubmit()" v-noMoreClick>确定
				</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import GridSelect from '@/components/gridSelect'
	import SelectTree from '@/components/treeSelect/treeSelect.vue'
	export default {
		data() {
			return {
				title: '',
				method: '',
				visible: false,
				loading: false,
				photoArra: [],
				formworkArra: [],
				inputForm: {
					id: '',
					contractNumber: '',
					signingTime: '',
					user: {
						id: ''
					},
					enterprise: {
						id: ''
					},
					photo: '',
					formwork: '',
					beginTime: '',
					endTime: '',
					userIsSure: '',
					userSalary: '',
					probationPeriod: '',
					probationSalary: '',
					branchdepart: {
						id: ''
					},
					department: {
						id: ''
					},
					postName: '',
					jobStatus: '',
					name: '',
					idCard: '',
					phone: '',
					remarks: '',
					earlyWarning: ''
				}
			}
		},
		components: {
			GridSelect,
			SelectTree
		},
		methods: {
			init(method, id) {
				this.method = method
				this.inputForm.id = id
				if (method === 'add') {
					this.title = `合同信息`
				} else if (method === 'edit') {
					this.title = '合同信息'
				} else if (method === 'view') {
					this.title = '合同信息'
				}
				this.photoArra = []
				this.formworkArra = []
				this.visible = true
				this.loading = false
				this.$nextTick(() => {
					this.$refs.inputForm.resetFields()
					if (method === 'edit' || method === 'view') { // 修改或者查看
						this.loading = true
						this.$http({
							url: `/dlyrl/hr/dispatchcontract/dispatchContract/queryById?id=${this.inputForm.id}`,
							method: 'get'
						}).then(({
							data
						}) => {
							this.inputForm = this.recover(this.inputForm, data.dispatchContract)
							this.inputForm.photo.split('|').forEach((item) => {
								if (item.trim().length > 0) {
									this.photoArra.push({
										name: decodeURIComponent(item.substring(item
											.lastIndexOf('/') + 1)),
										url: item
									})
								}
							})
							this.inputForm.formwork.split('|').forEach((item) => {
								if (item.trim().length > 0) {
									this.formworkArra.push({
										name: decodeURIComponent(item.substring(item
											.lastIndexOf('/') + 1)),
										url: item
									})
								}
							})
							this.loading = false
						})
					}
				})
			},
			// 表单提交
			doSubmit() {
				this.$refs['inputForm'].validate((valid) => {
					if (valid) {
						this.loading = true
						this.$http({
							url: `/dlyrl/hr/dispatchcontract/dispatchContract/save`,
							method: 'post',
							data: this.inputForm
						}).then(({
							data
						}) => {
							this.loading = false
							if (data && data.success) {
								this.visible = false
								this.$message.success(data.msg)
								this.$emit('refreshDataList')
							}
						})
					}
				})
			}
		}
	}
</script>
